<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Plugins/bootstraptable/bootstrap-table.min.css">
    <style>
        .table th {
            text-align: center;
        }
        .table td{
            text-align: center;
        }
        #form{
            display: flex;
            justify-content: space-between;
            padding-top: 20px;
        }
        #first{
            margin-left: 20px;
        }
    </style>
    <script src="/js/jquery-3.6.1.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col">
<!--            <div class="function">-->
<!--                &lt;!&ndash;    <form>&ndash;&gt;-->
<!--                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#studentModel"-->
<!--                        onclick="preAdd()" align="center">-->
<!--                    新增-->
<!--                </button>-->

<!--                <input type="text" class="form-control" placeholder="输入姓名" aria-describedby="basic-addon1"-->
<!--                       id="inputname">-->

<!--                <button type="button" class="btn btn-primary btn-lg"-->
<!--                        onclick="leadTable()" align="center">-->
<!--                    搜索-->
<!--                </button>-->
<!--                &lt;!&ndash;    </form>&ndash;&gt;-->
<!--            </div>-->

            <!-- Button trigger modal -->
            <form class="form-inline" id="form">
                <button type="button" class="btn btn-default btn-primary" onclick="preAdd()">新增</button>
                <div class="form-group" id="first">
                    <label for="searchName">请输入姓名</label>
                    <input type="text" class="form-control" id="searchName" placeholder="请输入名称" name ="searchName">
                </div>
                <div class="form-group">
                    <label>请选择性别</label>
                    <select class="form-control" id="searchSex">
                        <option value=""></option>
                        <option value="男" >男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="searchClassName">请输入班级名称</label>
                    <input type="text" class="form-control" id="searchClassName" placeholder="请输入名称" name ="searchClassName">
                </div>
                <div class="form-group">
                    <label for="searchAge">请输入年龄</label>
<!--                    number="number" onkeypress="return event.charCode >= 48" min="0" max="60"-->

                    <input type="text" oninput="value=value.replace(/[^\d]/g,'');if(value>60)value=30;if(value<1)value=1"  class="form-control" id="searchAge" placeholder="请输入年龄" name ="searchAge" pattern="[10-60]">
                </div>
                <div class="form-group">
                    <label for="searchScore">请输入成绩</label>
                    <input type="text" oninput="value=value.replace(/[^\d]/g,'');if(value>100)value=100;if(value<0)value=0" class="form-control" id="searchScore" placeholder="请输入成绩" name ="searchScore" pattern="[10-60]">
                </div>
                <button type="button" class="btn btn-default btn-primary" onclick="search()">查询</button>
            </form>

            <table class="table table-bordered table-striped" id="studentTb"></table>
        </div>

    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="studentModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">学生详细信息</h4>
            </div>
            <div class="modal-body">
                <form id="studentform">

                    <input hidden="hidden" id="id" name="id"/>
                    <div class="form-group">
                        <label for="no">学号</label>
                        <input type="text" class="form-control" id="no" name="no" placeholder="学号">
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="sex">性别</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="男">男</option>
                            <option value="女">女</option>

                        </select>
                    </div>
                    <div class="form-group">
                        <label for="classname">班级</label>
                        <input type="text" class="form-control" id="classname" name="classname" placeholder="班级">
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
                    </div>
                    <div class="form-group">
                        <label for="score">成绩</label>
                        <input type="text" class="form-control" id="score" name="score" placeholder="成绩">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveStudent()"> 保存</button>
            </div>
        </div>
    </div>
</div>


<script src="/js/bootstrap.min.js"></script>
<script src="/Plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/Plugins/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>

<script src="/js/list.js"></script>

</body>
</html>

